<template>
  <div class="login">
    <comRNav title="登录" :rightButton="false" />
    <div class="loginTypeWrap">
      <div class="loginType" :class="loginType == 0 ? 'loginTypeHover' : ''" @click="loginType = 0"><span>手机号快捷注册</span>
      </div>
      <div class="loginType" :class="loginType == 1 ? 'loginTypeHover' : ''" @click="loginType = 1"><span>账号密码登录</span>
      </div>
    </div>
    <div class="loginareaType">
      <div class="pic_warp">
        <div class="label">
          <input type="text" class="inptxt" placeholder="手机号/邮箱" @focus="userFocus" @blur="userBlur" v-model="username">
        </div>
        <em :class="userClear ? 'emblock' : 'emnone'" @click="username = ''"></em>
        <p v-if="nameVerify != ''" class="formtip">{{nameVerify}}</p>
      </div>
      <div class="pic_warp">
        <div class="label">
          <input :type="passType" class="inptxt" placeholder="密码" @focus="passFocus" @blur="passBlur"
            v-model="userpass">
        </div>
        <div class="eye" :class="passwordEye ? 'openEye' : 'closeEye'" @click="passwordEye = !passwordEye"></div>
        <em class="passEm" :class="passClear ? 'emblock' : 'emnone'" @click="userpass = ''"></em>
        <p v-if="passVerify != ''" class="formtip">{{passVerify}}</p>
      </div>
    </div>
    <div class="button_area">
      <input @click="handleLogin" type="button" :value="buttonInfor" :disabled="!disabled"
        :style="disabled ? 'background-color: #ff4664;' : 'background-color: #999;' ">
      <p>忘记密码</p>
    </div>
    <div class="loginother">
      <div class="hd">
        第三方平台登陆
      </div>
      <div class="share">
        <img src="../assets/login/QQ.png" alt="">
        <img src="../assets/login/pay.png" alt="">
        <img src="../assets/login/sina.png" alt="">
        <p><span>首次登录表示您同意</span><span>优购会员注册协议</span></p>
      </div>
    </div>
    <div class="loginother-foot">
      <div class="share-foot">
        <p><img src="../assets/login/ensure.png" alt=""> 正品保证</p>
        <p><img src="../assets/login/ensure.png" alt="">10天退货</p>
        <p><img src="../assets/login/ensure.png" alt="">10天补差价</p>
      </div>
    </div>
  </div>
</template>

<script>
import comRNav from "../components/comRNav";
import { userLogin, userReg } from "../utils/login.js";
export default {
  name: "login",
  data() {
    return {
      buttonInfor: "登录",
      loginType: 1, //控制登陆方式 0-手机号快捷登录 1-账号密码登录
      userClear: false, //用户名清除显示/隐藏
      passClear: false, //密码清除显示/隐藏
      username: "", //用户名
      userpass: "", //密码
      passwordEye: false, //密码显示隐藏
      nameVerify: "", //用户名验证信息
      passVerify: "" //密码验证信息
    };
  },
  watch: {
    loginType(newValue) {
      if (newValue == 0) {
        this.buttonInfor = "注册";
      } else if (newValue == 1) {
        this.buttonInfor = "登录";
      }
    }
  },
  computed: {
    passType() {
      if (!this.passwordEye) {
        return "password";
      } else {
        return "text";
      }
    },
    disabled() {
      if (this.username != "" && this.userpass != "") {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    //登录按钮
    async handleLogin() {
      console.log(1);
      let flagName = false;
      let reg = /^1(3|5|8)\d{9}$/;
      if (reg.test(this.username)) {
        flagName = true;
        this.nameVerify = "";
      } else {
        flagName = false;
        this.nameVerify = "输入的账户无效";
      }
      let flagPass = false;
      let reg1 = /^.{6,18}$/;
      if (reg1.test(this.userpass)) {
        this.passVerify = "";
        flagPass = true;
      } else {
        flagPass = false;
        this.passVerify = "请输入6-25为密码";
      }
      console.log(this.username, this.userpass);

      if (flagPass && flagName) {
        if (this.loginType == 1) {
          //登录
          let res = await userLogin({
            tel: this.username,
            pass: this.userpass
          });
          console.log(res, typeof res);
          if (typeof res == "object") {
            flagPass = true;
            this.passVerify = "";
            localStorage.setItem("token", res.tel);
            localStorage.setItem("uid", res.uid);
            localStorage.setItem("sex", res.sex);
            localStorage.setItem("birth", res.birth);
            localStorage.setItem("addr", res.addr);
            this.$router.push("/Mine");
          }
          if (typeof res == "string") {
            flagPass = false;
            this.passVerify = "账号或密码错误";
          }
        } else if (this.loginType == 0) {
          //注册
          let res = await userReg({
            tel: this.username,
            pass: this.userpass
          });
          console.log(res);
          if (typeof res == "object") {
            flagPass = true;
            this.passVerify = "";
            localStorage.setItem("token", res.tel);
            localStorage.setItem("uid", res.uid);
            localStorage.setItem("sex", res.sex);
            localStorage.setItem("birth", res.birth);
            localStorage.setItem("addr", res.addr);
            this.$router.push("/Mine");
          }
          if (typeof res == "string") {
            flagPass = false;
            this.passVerify = "该账号已存在";
          }
        }
      }
    },
    //用户名聚焦
    userFocus() {
      this.userClear = true;
    },
    //用户名失焦
    userBlur() {
      this.userClear = false;
    },
    //密码聚焦
    passFocus() {
      this.passClear = true;
    },
    //密码失焦
    passBlur() {
      this.passClear = false;
    }
  },
  components: {
    comRNav
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  .loginTypeWrap {
    overflow: hidden;
    position: relative;
    padding: 0 14px;
    .loginType {
      float: left;
      width: 50%;
      text-align: center;
      padding-top: 22px;
      font-size: 14px;
      border-bottom: 1px solid #d9d9d9;
      position: relative;
      span {
        display: block;
        width: 100%;
        border-bottom: 1px solid #fff;
        line-height: 35px;
        height: 35px;
        color: #333;
        font-size: 14px;
      }
    }
    .loginTypeHover {
      border-bottom: 1px solid #ff4664;
      span {
        color: #ff4664;
      }
    }
  }
  .loginareaType {
    margin: 4px 14px 0 14px;
    .pic_warp {
      position: relative;
      .label {
        border-radius: 0;
        padding-right: 30px;
        border-bottom: 1px solid #d9d9d9;
        .inptxt {
          padding-left: 5px;
          display: block;
          width: 100%;
          height: 44px;
          background: none;
          font-size: 14px;
          box-sizing: border-box;
          color: #333333;
          border: none;
        }
      }
      .labelNo {
        border-bottom: 1px solid #ff4664;
      }
      em {
        width: 34px;
        height: 36px;
        line-height: 36px;
        background: url(../assets/login/clear.png) center center no-repeat;
        background-size: 17px auto;
        position: absolute;
        top: 4px;
        right: 0;
      }
      .passEm {
        right: 64px;
      }
      .emblock {
        opacity: 1;
      }
      .emnone {
        opacity: 0;
      }
      .formtip {
        color: #ff4664;
        font-size: 12px;
        line-height: 24px;
      }
      .eye {
        height: 45px;
        width: 35px;
        position: absolute;
        top: 0;
        right: 10px;
      }
      .closeEye {
        background: url(../assets/login/black.png) center center no-repeat;
        background-size: 20px auto;
      }
      .openEye {
        background: url(../assets/login/show.png) center center no-repeat;
        background-size: 20px auto;
      }
    }
  }
  .button_area {
    margin: 0 14px;
    input {
      display: block;
      width: 100%;
      margin-top: 40px;
      padding: 0;
      color: #fff;
      height: 44px;
      line-height: 30px;
      font-size: 16px;
      border: none;
    }
    p {
      margin-top: 5px;
      text-align: right;
      line-height: 24px;
      font-size: 13px;
      color: #666;
    }
  }
  .loginother {
    margin: 14px;
    .hd {
      margin: 0 30px;
      margin-top: 90px;
      text-align: center;
      font-size: 10px;
      color: #a0a0a0;
      line-height: 32px;
    }
    .share {
      padding: 10px 0;
      text-align: center;
      img {
        width: 38px;
        height: 38px;
        margin: 0 28px;
      }
      p {
        padding-top: 20px;
        line-height: 18px;
        font-size: 12px;
        color: #666;
        span:first-child {
          color: #747474;
          margin-right: 2px;
        }
        span:last-child {
          text-decoration: underline;
          color: #ff4563;
        }
      }
    }
  }
  .loginother-foot {
    margin-top: 90px;
    margin-bottom: 20px;
    .share-foot {
      display: flex;
      margin: 0 40px;
      p {
        width: 33.333%;
        text-align: center;
        font-size: 12px;
        line-height: 18px;
        color: #666;
        img {
          width: 13px;
          vertical-align: text-bottom;
        }
      }
    }
  }
}
</style>